<template>
<div>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="角色名称">
      <el-input v-model="formInline.roleName" placeholder="角色名称"></el-input>
    </el-form-item>
    <el-form-item label="权限字符">
      <el-input v-model="formInline.roleKey" placeholder="权限字符"></el-input>
    </el-form-item>
    <el-form-item label="状态">
      <el-select v-model="formInline.status" placeholder="状态">
        <el-option label="正常" value="0"></el-option>
        <el-option label="不正常" value="1"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="开始时间">
      <el-date-picker
          v-model="formInline.beginTime"
          type="date"
          placeholder="开始时间">
      </el-date-picker>
    </el-form-item>-
    <el-form-item>
      <el-date-picker
          v-model="formInline.endTime"
          type="date"
          placeholder="结束时间">
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="load">查询</el-button>
      <el-button type="primary" @click="tolist">重置</el-button>
    </el-form-item>
  </el-form>
  <el-col :span="1.5">
    <el-button
        type="primary"
        icon="el-icon-plus"
        size="mini"
        @click="toAdd"
        v-hasPermi="['system:role:add']">新增</el-button>&nbsp;
  </el-col>-
  <el-col :span="1.5">
    <el-button
        type="success"
        icon="el-icon-edit"
        size="mini"
        :disabled="single"
        @click="handleUpdate"
        v-hasPermi="['system:role:edit']">修改</el-button>&nbsp;
  </el-col>
  <el-col :span="1.5">
    <el-button
        type="danger"
        icon="el-icon-delete"
        size="mini"
        :disabled="multiple"
        @click="handleDelete"
        v-hasPermi="['system:role:remove']">删除</el-button>&nbsp;
  </el-col>
  <el-col :span="1.5">
    <el-button
        type="warning"
        icon="el-icon-download"
        size="mini"
        @click="exportExcel"
        v-hasPermi="['system:role:export']">导出</el-button>
  </el-col>
  <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column
        prop="roleId"
        label="角色编号">
    </el-table-column>
    <el-table-column
        prop="roleName"
        label="角色名称">
    </el-table-column>
    <el-table-column
        prop="roleKey"
        label="权限字符">
    </el-table-column>
    <el-table-column
        prop="roleSort"
        label="显示顺序">
    </el-table-column>
    <el-table-column prop="status" label="状态">
      <template v-slot="scope">
        <el-switch
            v-model="scope.row.status"
            active-value="0"
            inactive-value="1"
        @change="upstatus(scope.row)">
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column
        prop="createTime"
        label="创建时间">
    </el-table-column>
    <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['system:role:edit']">修改</el-button>
          <el-button
              size="mini"
              type="text"
              icon="el-icon-circle-check"
              @click="handleDataScope(scope.row)"
              v-hasPermi="['system:role:edit']">数据权限</el-button>
          <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="del(scope.row.roleId)"
              v-hasPermi="['system:role:remove']">删除</el-button>
        </template>
    </el-table-column>
  </el-table>
  <el-pagination
      @current-change="goPage"
      :page-size="size"
      layout="total, prev, pager, next"
      :total="total">
  </el-pagination>
<!--  新增角色和权限页面-->
  <el-dialog title="新增角色" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="角色名称">
        <el-input v-model="form.roleName"></el-input>
      </el-form-item>
      <el-form-item label="权限字符">
        <el-input v-model="form.roleKey"></el-input>
      </el-form-item>
      <el-form-item label="显示顺序">
        <el-input v-model="form.roleSort"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <template>
          <el-radio v-model="form.status" label="0">正常</el-radio>
          <el-radio v-model="form.status" label="1">不正常</el-radio>
        </template>
      </el-form-item>
      <el-form-item label="菜单权限">
          <el-tree
              :data="treeData"
              show-checkbox
              node-key="id"
              :props="defaultProps"
              @check-change="checkPermis">
          </el-tree>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="add()">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import {formToJSON} from "axios";

export default {
  name: "RoleView",
  data(){
    return{
      tableData:[],
      formInline:{},
      size:3,
      total:0,
      current:1,
      dialogFormVisible:'',
      form:{
        dids:[]
      },
      multipleSelection:[],
      treeData:[],
    }
  },
  created() {
    this.load();
    this.dialogFormVisible=false
    this.getMenuTreeselect();
  },
  methods:{
    defaultProps: {
      children: 'children',
      label: 'label'
    },
    checkPermis(data, checked,indeterminate) {
      console.log('dataid'+data.id)
      this.form.dids.push(parseInt(data.id))
      console.log('form-id'+this.form.dids)
    },
    load(){
      this.axios.get("/role/RoleManger/listRole",{params:{size:this.size,current:this.current,roleName:this.formInline.roleName,roleKey:this.formInline.roleKey,
        status:this.formInline.status,beginTime:this.formInline.beginTime,endTime:this.formInline.endTime}}).then(res=>{
        this.tableData=res.data.data.records
        this.total=res.data.data.total
      })
    },
    upstatus(row){
      this.axios.get("/role/RoleManger/upstatus?roleId="+row.roleId).then(res=>{
        alert("是否要改变");
        if (res.data.code==200){
          this.$message.success("修改成功");
        }else {
          this.$message.error("修改失败");
        }
      })

    },
    goPage(page){
      this.current=page
      this.load();
    },
    tolist(){
      location="/role"
    },
    exportExcel(){
      this.axios.post("/role/RoleManger/exportExcel").then(res=>{
        if (res.data.code==200){
          this.$message.success(res.data.msg)
        }else {
          this.$message.error(res.data.msg)
        }
      })
    },
    del(roleId){
      this.axios.get("/role/RoleManger/delRole?id="+roleId).then(res=>{
        if (res.data.code==200){
          this.$message.success("成功");
        }
      })
    },
    toAdd(){
      this.dialogFormVisible=true
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getMenuTreeselect(){
      this.axios.post("/role/RoleManger/listMenuTree").then(res=>{
        this.treeData=res.data.data
      });
    },
    add(){
      console.log(this.form.dids)
    }



  }
}
</script>

<style scoped>

</style>